/**
 * 下方滚动条
 * 
 * @author Zdream
 * @date 2022-05-14
 * @since Aurora 0.4.1
 */

import plugins from './plugins';
import saveSlotPage from './page/slot_page';

/**
 * 如果是 name_tag/title_and_content 的挂件
 * 
 * 需要:
 * 1. 标题
 * 2. 内容文字
 * 3. 时长
 * 
 * ---
 * 
 * 如果是 name_tag/blank 的挂件
 * 
 * 需要: 时长
 */
function create(context, key) {
	switch (key) {
		case 'main': return createMain(context);
		case 'save_slot': return saveSlotPage(context);
		default: return null;
	}
}

function createMain(context) {
  return {
    template : context.template,
    data : function () {
      return {
        status : null,

        // 数据区
        mode : 'read', // 'read' | 'edit'
        tags : {},
        order : [],
        currentIndex : -1,

        // 数据区 （edit 部分）
        editId : 0, // 正在修改的 id. 0 表示新创建的
        editType : '', // 正在修改的 series + pendant
        editTitle : '', // name_tag/title_and_content
        editContent : '', // name_tag/title_and_content
        editDuration : 5, // name_tag/title_and_content | name_tag/duration

        // 元数据
        /*
         *  [
         *    {
         *      "name":"空白",
         *      "type":"name_tag/blank",
         *      "params":[{ "name":"duration", "min":1 }]
         *    }, ...
         *  ]
         */
        names : [],
        /*
         *  {
         *    "name_tag/blank" : {
         *      "duration": { "name":"duration", "min":1 }
         *    }, ...
         *  }
         */
        metas : {},
      }
    },
    props : {
      sid : String,
    },
    methods : {
      // 模式修改
      modeChange : function (mode) {
        this.mode = mode;
      },
      btnCreate : function () {
        this.editId = 0;
        this.editType = '';
        this.editTitle = '';
        this.editContent = '';
        this.editDuration = 5;
        this.modeChange('edit');
      },
      btnModeRead : function () {
        this.modeChange('read');
      },
      btnModeSort : function () {
        this.modeChange('sort');
      },
      // 创建
      btnEditOrCreate : function () {
        if (this.editId == 0) {
          // 创建
          context.sendCommand(this.sid, 'pushTag', this.pushTagArgs());
        } else {
          // 修改
          var chunk = this.pushTagArgs();
          chunk.id = this.editId;

          context.sendCommand(this.sid, 'editTag', chunk);
        }

        this.clearEdit();
        this.modeChange('read');
      },
      btnRemove : function () {
        const index = this.order.findIndex(i => i==this.editId);
        let newOrder = this.order.concat(); // 复制数组
        newOrder.splice(index, 1);
        context.sendCommand(this.sid, 'sortTags', {
          order : newOrder
        });
        this.modeChange('read');
      },
      btnUpper : function (index) {
        let newOrder = this.order.concat(); // 复制数组
        let i = newOrder[index];
        newOrder[index] = newOrder[index - 1];
        newOrder[index - 1] = i;
        context.sendCommand(this.sid, 'sortTags', {
          order : newOrder
        });
      },
      btnLower : function (index) {
        let newOrder = this.order.map(i => i);
        let i = newOrder[index];
        newOrder[index] = newOrder[index + 1];
        newOrder[index + 1] = i;
        context.sendCommand(this.sid, 'sortTags', {
          order : newOrder
        });
      },
      btnTagEdit : function (id) {
        this.editId = id;
        this.modeChange('edit');

        var tag = this.tags[id];
        this.editType = tag.type;
        for (var key in tag.data) {
          switch (key) {
            case 'title' : this.editTitle = tag.data[key]; break;
            case 'content' : this.editContent = tag.data[key]; break;
            case 'duration' : this.editDuration = tag.data[key] / 1000; break;
            // TODO
          }
        }
      },

      // 监听事件部分
      onScreenUpdated : function () {
        let status = this.status = context.getStatus(this.sid);
        let source = status.data;

        /*
         *  {
         *		tags : this.tags, <- 只需要管这个就行了
         *    order : []
         *		current : this.current,
         *	};
         */
        const tags = JSON.parse(JSON.stringify(source.tags));
        this.order = source.order.concat();
        this.currentIndex = source.current;

        for (var key in tags) {
          let tag = tags[key];
          tag.type = tag.series + "/" + tag.pendant;
        }
        this.tags = tags;
      },

      // 其它
      clearEdit : function () {
        this.editId = 0;
        this.editTitle = '';
        this.editContent = '';
        this.editDuration = 5;
        this.editType = '';
      },

      /* **********
       * 标签内容 *
       ********** */

      tagName : function (id) {
        return plugins.pluginType(this.tags[id]);
      },
      pluginName : function (id) {
        return plugins.pluginTitle(this.tags[id]);
      },
      pluginColor : function (id) {
        return plugins.pluginTagColor(this.tags[id]);
      },

      pushTagArgs :function () {
        switch (this.editType) {
          case 'name_tag/title_and_content': return this.nameTagTitleAndContent();
          case 'name_tag/blank': return this.nameTagBlank();
          case 'name_tag/cgcr2018_logo': return this.nameTagCGCR2018Logo();
          case 'name_tag/cgcr2018_bottom': return this.nameTagCGCR2018Bottom();
          // TODO
          default : throw this.editType;
        }
      },

      nameTagTitleAndContent : function () {
        return {
          "data" : {
            "title" : this.editTitle,
            "content" : this.editContent,
            "duration" : this.editDuration * 1000
          },
          "series" : "name_tag",
          "pendant" : "title_and_content"
        };
      },

      nameTagCGCR2018Logo : function () {
        return {
          "data" : {},
          "series" : "name_tag",
          "pendant" : "cgcr2018_logo"
        };
      },

      nameTagCGCR2018Bottom : function () {
        return {
          "data" : {
            "title" : this.editTitle,
            "content" : this.editContent,
            "duration" : this.editDuration * 1000
          },
          "series" : "name_tag",
          "pendant" : "cgcr2018_bottom"
        };
      },

      nameTagBlank : function () {
        return {
          "data" : {
            "duration" : this.editDuration * 1000
          },
          "series" : "name_tag",
          "pendant" : "blank"
        };
      }
    },
    mounted : function () {
      this.status = context.getStatus(this.sid);

      const names = plugins.allPluginsParam();
      const metas = {};
      names.forEach(n => {
        metas[n.type] = {};
        n.params.forEach(p => metas[n.type][p.name] = p);
      });
      this.metas = metas;
      this.names = names;

      this.onScreenUpdated();
      context.getBus().$on('screen-status-sync-all', this.onScreenUpdated);
      context.getBus().$on('screen-updated', this.onScreenUpdated);
      context.getBus().$on('screen-destroyed', this.onScreenUpdated);
    },
    destroyed : function () {
      context.getBus().$off('screen-status-sync-all', this.onScreenUpdated);
      context.getBus().$off('screen-updated', this.onScreenUpdated);
      context.getBus().$off('screen-destroyed', this.onScreenUpdated);
    }
  }
}

export default {
	factory : create,
	tabs : [{
		key : 'save_slot',
		name : '存档管理',
		icon : 'book'
	}]
};
